<template>
  <div class="zhu1">
    <!-- 个人中心-我的订单模块 -->
    <el-card class="box-card dd">
      <div slot="header" class="clearfix">
        <span>我的订单</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="text item">
        <el-badge
          :hidden="Boolean(statusList.dzf < 1)"
          :value="this.statusList.dzf"
          class="item"
        >
          <router-link
            :to="{ path: '/userhome/user_dindan', query: { activeName: '0' } }"
          >
            <el-card class="box-card-item el-icon-bank-card" shadow="hover">
              <div class="text1">
                <span>待付款</span>
              </div>
            </el-card></router-link
          >
        </el-badge>

        <el-badge
          :hidden="Boolean(this.statusList.dfh < 1)"
          :value="this.statusList.dfh"
          class="item"
        >
          <router-link
            :to="{ path: '/userhome/user_dindan', query: { activeName: '1' } }"
          >
            <el-card class="box-card-item el-icon-receiving" shadow="hover">
              <div class="text1">
                <span>待发货</span>
              </div>
            </el-card>
          </router-link>
        </el-badge>

        <el-badge
          :hidden="Boolean(this.statusList.dsh < 1)"
          :value="this.statusList.dsh"
          class="item"
        >
          <router-link
            :to="{ path: '/userhome/user_dindan', query: { activeName: '2' } }"
          >
            <el-card class="box-card-item el-icon-box" shadow="hover">
              <div class="text1">
                <span>待收货</span>
              </div>
            </el-card>
          </router-link>
        </el-badge>
        <el-badge
          :hidden="Boolean(this.statusList.wc < 1)"
          :value="this.statusList.wc"
          class="item"
        >
          <router-link
            :to="{ path: '/userhome/user_dindan', query: { activeName: '3' } }"
          >
            <el-card
              class="box-card-item el-icon-chat-dot-round"
              shadow="hover"
            >
              <div class="text1">
                <span>待评价</span>
              </div>
            </el-card>
          </router-link>
        </el-badge>
        <el-badge hidden="false" value="0" class="item">
          <router-link
            :to="{ path: '/userhome/user_dindan', query: { activeName: '3' } }"
          >
            <el-card class="box-card-item el-icon-price-tag" shadow="hover">
              <div class="text1">
                <span>售后</span>
              </div>
            </el-card>
          </router-link>
        </el-badge>
        <el-badge
          :hidden="Boolean(this.statusList.all < 1)"
          :value="this.statusList.all"
          class="item"
        >
          <router-link
            :to="{ path: '/userhome/user_dindan', query: { activeName: '4' } }"
          >
            <el-card class="box-card-item el-icon-right" shadow="hover">
              <div class="text1">
                <span>全部订单</span>
              </div>
            </el-card>
          </router-link>
        </el-badge>
      </div>
    </el-card>
    <!-- 个人中心-我的关注板块 -->
    <el-card class="box-card card-guanzhu">
      <div slot="header" class="clearfix">
        <span>我的钱包</span>
      </div>

      <el-progress
        class="progress"
        :format="format"
        type="dashboard"
        :percentage="percentage"
      ></el-progress>
      <div class="txt">
        <span>消费等级</span>
      </div>

      <div class="ye">
        <h4>当前余额</h4>
        <i
          class="layui-icon layui-icon-rmb"
          style="margin-left: 10px; font-size: 20px; color: #1E9FFF;"
        ></i>

        <!-- <img
          @click="show = 1"
          v-if="show == 0"
          style=" cursor: pointer; position:  absolute; width:24px; margin-left:43px; margin-top:52px; "
          src="../../assets/闭眼睛.png"
          alt=""
        /> -->

        <br />
        <i>{{ this.show == 1 ? this.accountBalance : "*********" }}</i
        ><i
          @click="show = 0"
          v-if="show == 1"
          class="el-icon-view"
          style="cursor: pointer; font-size:25px ;margin-left: 10px;"
        ></i>
        <i
          @click="show = 1"
          style="cursor: pointer; font-size:25px ;margin-left: 10px;"
          v-if="show == 0"
          class="iconfont icon-biyanjing"
        ></i>
        <br />
        <el-button style="font-size:10px" size="mini" @click="cz" type="text"
          >充值</el-button
        >
        <el-button size="mini" @click="dakai" type="text">{{
          this.ifpass == "1" ? "修改支付密码" : "创建支付密码"
        }}</el-button>
      </div>
    </el-card>
    <!-- 个人中心-我的购物车模块  -->
    <el-card class="box-card card-gwc">
      <div slot="header" class="clearfix">
        <span>我的购物车</span>
      </div>

      <ul class="gwc">
        <li v-if="this.fenye.length == 0">
          <div class="gwc-item">
            <!-- <div class="gwc-item-img">
              <img src="../../assets/gwc.png" alt="" />
            </div> -->
            <div class="gwc-item-txt" style="text-align: center">
              <p>购物车空空如也，快去挑选商品吧</p>
            </div>
          </div>
        </li>

        <li v-for="item in this.fenye" :key="item.bookId">
          <div class="gwc-list">
            <el-image
              class="gwc_list_img"
              style="width: 1px; height: 90px;flex:0.5"
              :src="item.img"
            ></el-image>
            <div class="list-title">
              <p>{{ item.title }}</p>
            </div>
            <div class="list-sum">✕{{ item.count }}</div>
            <div class="list-price" style="color:red">
              ￥{{ item.price * item.count }}
            </div>
          </div>
        </li>
      </ul>
      <div class="fy" style="float: right">
        <el-pagination
          small
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="this.totalSize"
          :current-page="index"
          :page-size="4"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 常购图书模块 -->
    <el-card class="box-card card-changgou">
      <div slot="header" class="clearfix">
        <span>历史浏览</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          @click='genduo'>更多</el-button
        >
      </div>
      <ul >
        <li v-for="item in history_list" :key="item.bookId">
       <router-link :to="{ path: '/book', query: { id: item.bookId } }" >
          <el-tooltip placement="top" effect="light">
            <div slot="content">浏览日期：<br />{{ item.createTime |formatDate}}</div>
             
            <el-image
              referrer="no-referrer|origin|unsafe-url"
              style="width: 40; height: 70px;margin:5px 9%"
              :src="item.imgUrl"
              alt=""
              fit="fill"
              href=""
            ></el-image>
          
          </el-tooltip>
          
          <div style="width: 86%;margin: 0px 7%">
            
            <a  class="cg-title">
              {{
                item.title.length > 6
                  ? item.title.substring(0, 6) + "..."
                  : item.title
              }}
            </a>
            <div class="cg-price">
              <span style="font-size:14px;color: #bf7f5f;">￥</span>
              {{ item.price }}
            </div>
          </div>
            </router-link>
         
        </li>
      </ul>
     

      
    </el-card>

    <!-- //修改支付密码 -->
    <el-dialog
      title="修改支付密码"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="form.oldPassword"
            type="password"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="form.newPassword"
            type="password"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit('form')">
            确定
          </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      //足迹
      history_list: [],
      dialogFormVisible: false,
      ifpass: 0,
      accountBalance: "0", //用户余额
      statusList: {
        //用户待支付订单
        dzf: 0, //待支付数量
        all: 0, //全部订单数量
        dfh: 0, //待发货订单数量
        dsh: 0, //待收货数量
        wc: 0, //已完成状态
      },
      tableData: [], //购物车数组
      categoriesId: "",
      categoriesName: "",
      pageSize: 4,
      totalSize: null,
      index: 1,
      fenye: [], //el-table  绑定的数据
      percentage: 0.1, //消费等级
      show: 0, //余额是否显示
    };
  },
  //日期格式化
  filters: {
    formatDate(time) {
      if (time) {
        var date = new Date(time);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? "0" + minute : minute;
        second = second < 10 ? "0" + second : second;
        return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      }
    },
  },
  methods: {
    dakai() {
      this.dialogFormVisible = true;
    },
    get_userlevel() {
      //获取用户等级
      console.log("this.percentage");
      let params = new URLSearchParams();
      params.append("userId", this.$store.getters.getUser.userId);
      axios.post("/fl-user/checkAccountLevel", params).then((res) => {
        this.percentage = res.data.data;
        console.log(res);
      });
    },
    cz() {
      //余额充值
      this.$router.push({ path: "/pay" });
    },
    format(percentage) {
      switch (percentage) {
        case 100:
          return "永久会员";
        case 87.5:
          return "王者会员";
        case 75.0:
          return "超凡大师会员";
        case 62.5:
          return "傲世宗师会员";
        case 50.0:
          return "钻石会员";
        case 37.5:
          return "铂金会员";
        case 25.0:
          return "黄金会员";
        case 12.5:
          return "白银会员";
        case 0:
          return "青铜会员";
        case 0.1:
          return "----";
      }
    },
    // async get_order() {
    //   ;
    //   // let userId=JSON.parse(localStorage.getItem("userInfo")).userId
    //   await axios
    //     .get("/fl-bookOrder/searchOrderByUserId", {
    //       params: {
    //         userId: this.$store.getters.getUser.userId,
    //       },
    //     })
    //     .then((response) => {
    //       ;
    //       if (response.data.code == 200) {
    //         this.$store.commit("SET_ORDER", response.data.data);
    //         // this.$router.go(0);
    //       }
    //     });
    // },
    //得到订单列表
    async getOrderList() {
      // let userId=JSON.parse(localStorage.getItem("userInfo")).userId
      await axios
        .get("/fl-bookOrder/searchOrderByUserId", {
          params: {
            userId: this.$store.getters.getUser.userId,
          },
        })
        .then((response) => {
          if (response.data.code == 200) {
            this.$store.commit("SET_ORDER", response.data.data);
            // this.$router.go(0);
          }
        });
      this.orderList = this.$store.getters.getuser_order;
      this.getstatus_0();
    },
    getstatus_0() {
      this.statusList.dzf = 0;
      this.statusList.all = 0;
      this.statusList.dfh = 0;
      this.statusList.dsh = 0;
      this.statusList.wc = 0;
      //统计用户订单各状态数量
      for (let item of this.orderList) {
        this.statusList.all++;
        if (item[item.length - 1].orderStatus == 0) {
          this.statusList.dzf++;
        } else if (item[item.length - 1].orderStatus == 1) {
          this.statusList.dfh++;
        } else if (item[item.length - 1].orderStatus == 2) {
          this.statusList.dsh++;
        } else if (item[item.length - 1].orderStatus == 3) {
          this.statusList.wc++;
        }
      }
      this.$store.commit("SET_dd", this.statusList);
    },
    set_gwc() {
      //获取该用户请求的购物车数据，进行加工处理

      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      axios
        .get("/fl-carts/selectAllCartsByUsername", {
          params: {
            username: this.userInfo.username,
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then(async (res) => {
          this.list = res.data.data;

          const that = this;

          for (let item of that.list) {
            await axios
              .get("/fl-book/searchBookByBookId", {
                params: {
                  bookId: item.bookId,
                },
                headers: {
                  Authorization: localStorage.getItem("token"),
                },
              })
              .then((res) => {
                this.$set(res.data.data, "count", item.count); //添加count数量属性
                that.tableData.push(res.data.data);
                that.getList();
              })
              .catch((error) => {});
          }
        });
    },
    getList() {
      this.fenye = this.tableData.filter(
        //分页函数 filter筛选数组
        (item, index) =>
          index < this.index * this.pageSize &&
          index >= this.pageSize * (this.index - 1)
      );
      this.totalSize = this.tableData.length;
    },
    handleSizeChange(val) {
      // ;
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.index = val;
      this.getList();
    },
    //获取游览记录
    async get_history() {
      await axios
        .get("/member/readHistory/list", {
          params: {
            memberId: this.$store.getters.getUser.userId,
          },
        })
        .then((res) => {
          console.log(res);
          this.history_list = res.data.data;
          //筛选重复的书名
          this.history_list = this.history_list.filter(
            (item, index) =>
              this.history_list.findIndex((x) => x.bookId == item.bookId) ==
              index
          );
        });
        //只显示前9个
      this.history_list = this.history_list.slice(0, 9);
      console.log(this.history_list);
    },

  },
  watch: {
    $route: {
      handler(val, oldval) {
        //通过路由监听来解决路由缓存导致页面不刷新bug

        //新路由信息

        if (val.fullPath != oldval.fullPath) {
          this.accountBalance = this.$store.getters.getUser.accountBalance;

          setTimeout(() => {
            this.get_userlevel();
          }, 1000);

          this.getOrderList();
        } //老路由信息
      },
      // 深度观察监听
      // deep: true,
    },
  },
  created() {
    axios.get("/fl-user/getUserPayPassword").then((res) => {
      if (res.data.data) {
        this.ifpass = 1;
      }
    });
    this.accountBalance = this.$store.getters.getUser.accountBalance;
    this.getOrderList();
    this.set_gwc();

    this.getList();
    this.get_history();
    this.get_userlevel();
  },
};
</script>

<style>
.text {
  font-size: 14px;
  float: left;
}

.item {
  margin-bottom: 18px;
  float: left;
}

.clearfix:before,
.clearfix:after {
  display: table;
}
.clearfix:after {
  clear: both;
}
.card-guanzhu .progress {
  margin-left: 20px;
  margin-top: -10px;
}
.card-guanzhu .txt {
  margin-top: -20px;
  margin-left: 46px;
  font-size: 19px;
  font-weight: 700;
}
.card-guanzhu .ye {
  margin-top: -120px;
  margin-left: 200px;
  line-height: 40px;
}
.card-guanzhu .ye i {
  font-size: 25px;
  font-weight: 700;
}
.card-guanzhu .ye p {
  cursor: pointer;
}
.card-guanzhu .ye h4 {
  display: inline;
}
.box-card-item {
  height: 90px;
  margin-left: 10px;
  margin-top: 10px;
  border: none;
  font-size: 60px;
  text-align: center;
}

.card-gwc {
  float: left;

  margin-bottom: 10px;
  width: 50%;
}
.dd {
  width: 50%;
  float: left;
}

.text1 {
  font-size: 12px;
  margin-top: -10px;
}
.card-guanzhu {
  width: 33%;
  height: 215px;
}
.card-guanzhu ul {
  width: 200px;
  height: 10px;
  text-align: center;
}
.card-guanzhu ul li {
  margin-left: 30px;
  line-height: 30px;
  padding: 31px;
}
.card-gwc .fy ul {
  width: 150px;
}
.card-guanzhu ul li i {
  display: block;
  width: 55px;
  height: 55px;
  margin: 0 auto;
}
.badge_dis .icobadage_plus {
  background-position: -177px -59px;
}
.icobadage_plus {
  background-repeat: no-repeat;
}
.card-gwc .fy li {
  width: 10px;
}
.card-gwc ul {
  width: 100%;
}
.card-gwc ul li {
  width: 100%;
  margin-bottom: 5px;
  line-height: 90px;
  border-bottom: 1px solid #dedede;
}
.gwc-list {
  width: 100%;
  height: 90px;
  display: flex;
}
.gwc-list .gwc_list_img {
  width: 5px;
}
.list-title {
  margin-left: 20px;
  flex: 2;
}
.list-sum {
  flex: 1;
}
.list-price {
  flex: 1;
}
.card-changgou {
  width: 33%;
}
.card-changgou ul {
  width: 350px;
  text-align: center;
}
.card-changgou ul li {
  width: 100px;
}
.cg-title {
  font-size: 10px;
}
.cg-price {
  font-size: 5px;
}
</style>
